<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'图标'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "0">
        <div class="analyItem">
            <p class="analyItemTit tx-center">文档</p>
            <div class="analyItemCon">
                <a class="cBlue" target="_" href="https://lib.rxjy.com/element-rx/static/icons/iconfont/demo_index.html">你需要了解图标用法以及类名>>></a>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">示例</p>
            <div class="analyItemCon">
                <p class="cRed">使用以下标签（扩展查看下方表格）</p>
                <codemd url="Lesson6/docs/icons.md"></codemd>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">大小</p>
            <div class="analyItemCon">
                <p class="cRed">如需定义字体大小，可使用以下通用字号(以一个图标为示例)</p>
                <table class="uiTable">
                    <thead>
                        <tr>
                            <th>图标</th>
                            <th>字号类名</th>
                            <th>图标</th>
                            <th>字号类名</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) of list" :key="index">
                            <template v-for="(ite, inde) of item">
                                <td :key="inde"><i class="iconfont icon-add" :class="ite"></i></td>
                                <td :key="inde">{{ite}}</td>
                            </template>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">颜色</p>
            <div class="analyItemCon">
                <p class="cRed">可以定义任意颜色(cRed, cGreen 之类的)</p>
                <table class="uiTable">
                    <thead>
                        <tr>
                            <th>图标</th>
                            <th>颜色</th>
                            <th>图标</th>
                            <th>颜色</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><i class="iconfont icon-add cRed"></i></td>
                            <td>cRed</td>
                            <td><i class="iconfont icon-add cBlue"></i></td>
                            <td>cBlue</td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import codemd from '../code-md'
export default {
    components: {
        codemd
    },
    data () {
        return {
            list: []
        }
    },
    created () {
        let list = []
        for (let i = 12; i <= 36; i++) {
            list.push(`icon-${i}`)
        }
        ['xs', 'sm', 'lg'].forEach(item => {
            list.push(`icon-${item}`)
        })
        for (let i = 1; i <= 10; i++) {
            list.push(`icon-${i}x`)
        }
        let left = []
        let right = []
        let contt = []
        list.forEach((item, index) => {
            if (index % 2 === 0) {
                left.push(item)
            } else {
                right.push(item)
            }
        })
        left.forEach((item, index) => {
            contt.push([
                item,
                right[index] || ''
            ])
        })
        this.list = contt
        console.log(this.list)
    },
    methods: {

    }
}
</script>
